<template>
	<view class="choose-community">
		<view class="current-location">
			<view class="title">
				当前地点
			</view>
			<view class="content">
				<text>{{currentLocation}}</text>
				<view @click="chooseLocation">
					<image src="../../static/icon/locate.png" />
					<text>重新定位</text>
				</view>
			</view>
		</view>

		<view class="community">
			<view class="title">
				附近社区
			</view>
			<u-cell-group>
				<u-cell v-for="item in communityList" :key="item.id" :title="item.title" isLink
					@click="onCell(item.title)">
				</u-cell>
			</u-cell-group>
		</view>

		<map @markertap="onMarker" :scale="16" :markers="markers" id="map" :longitude="location.longitude"
			:latitude="location.latitude"></map>
	</view>
</template>

<script>
	import qqmapwx from '../../utils/initQqMapWx.js'
	export default {
		data() {
			return {
				location: {
					longitude: 0,
					latitude: 0
				},
				markers: [{
					id: 1,
					longitude: 0,
					latitude: 0,
					width: 40,
					height: 40
				}],
				currentLocation: '定位中...',
				communityList: []
			};
		},
		onLoad() {
			// 初始化定位，定位的逻辑中需要用到实例
			this.initLocation()
		},
		methods: {
			// 初始化定位
			initLocation() {
				// 进行定位
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: 'true',
					success: (res) => {
						// console.log(res)

						this.updateLocation(res)
						// 用于坐标解析
						this.initLocationText()
						// 附近搜索
						this.searchCommunity()
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			// 将坐标解析文本
			initLocationText() {
				qqmapwx.reverseGeocoder({
					location: this.location,
					success: (res, data) => {
						// console.log()
						this.currentLocation = res.result.address
					}
				})
			},
			// 重新选择位置
			chooseLocation() {
				uni.chooseLocation({
					...this.location,
					success: (res) => {
						console.log(res)
						if (!res.name) return
						this.currentLocation = res.name
						this.updateLocation(res)
						// 附近搜索
						this.searchCommunity()
					}
				})
			},
			// 更新地图位置
			updateLocation(res) {
				this.location.longitude = res.longitude
				this.location.latitude = res.latitude
				this.markers[0].longitude = res.longitude
				this.markers[0].latitude = res.latitude
			},
			// 搜索附近小区
			searchCommunity() {
				// console.log(this.location)
				qqmapwx.search({
					location: this.location,
					keyword: '小区住宅',
					page_size: 10,
					success: (res) => {
						console.log(res)
						this.communityList = res.data
						res.data.forEach(item => {
							item.id = item.id - 0
							// item.id 大数 超过了2的53次方
							this.markers.push({
								id: item.id - 0,
								longitude: item.location.lng,
								latitude: item.location.lat,
								width: 20,
								height: 20,
								iconPath: '/static/icon/house.png',
								title: item.title
							})
						})
					}
				})
			},
			onMarker(e) {
				console.log(e)
				const house = this.markers.find((item) => {
					return item.id === e.markerId
				})
				console.log(house)
				uni.navigateTo({
					url: '/pkg-house/house-number/house-number?title=' + house.title
				})
			},
			onCell(e) {
				uni.navigateTo({
					url: '/pkg-house/house-number/house-number?title=' + e
				})
			}
		}
	}
</script>

<style lang="scss">
	#map {
		width: 750rpx;
		height: 750rpx;
	}

	.choose-community {
		height: 100%;
		background-color: #FAFAFA;

		.current-location {
			.title {
				padding: 0 30rpx;
				line-height: 86rpx;
			}

			.content {
				width: 750rpx;
				height: 102rpx;
				background-color: #fff;
				box-sizing: border-box;
				padding: 0 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 28rpx;
					color: #333;
				}

				view {
					display: flex;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 6rpx;
					}

					text {
						color: #5591AF;
					}
				}
			}
		}

		.community {
			.title {
				padding: 0 30rpx;
				line-height: 86rpx;
			}

			::v-deep .u-cell__body {
				background-color: #fff;
			}
		}
	}
</style>
